AJAX (Asynchronous JavaScript and XML) হল একটি ওয়েব ডেভেলপমেন্ট টেকনোলজি, যা পেজ রিফ্রেশ না করেই ডাটাবেস থেকে ডাটা আসা, সেভ হওয়া এবং ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও গতিশীল এবং স্রুতিময় করে তোলে। AJAX এবং PHP একত্রে ব্যবহার করলে আপনি dynamic web applications তৈরি করতে পারবেন, যেখানে পেজ রিফ্রেশের প্রয়োজন হয় না এবং ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত হয়।
এখানে আমরা দেখব কিভাবে AJAX এবং PHP দিয়ে একটি dynamic web application তৈরি করা যায় যা ডাটাবেস থেকে ডাটা লোড করবে এবং ব্যবহারকারী একাধিক অপারেশন সম্পন্ন করতে পারবে।
1. AJAX এবং PHP এর সাথে সংযোগ স্থাপন
AJAX-এ ক্লায়েন্ট সাইডে জাভাস্ক্রিপ্টের মাধ্যমে ডাটা পাঠানো হয় এবং PHP সার্ভার সাইডে সেই ডাটাকে প্রক্রিয়া করে রেসপন্স পাঠায়। এই প্রক্রিয়া পেজ রিফ্রেশ ছাড়াই ডাটা লোড বা আপডেট করার সুযোগ দেয়।
ধরা যাক, আমরা একটি সিম্পল টাস্ক লিস্ট অ্যাপ্লিকেশন তৈরি করছি, যেখানে ব্যবহারকারী নতুন টাস্ক যোগ করবে এবং সেই টাস্ক ডাটাবেসে সেভ হবে। AJAX দিয়ে এই টাস্কটি যোগ করা হবে এবং পেজ রিফ্রেশ ছাড়া তা টাস্ক লিস্টে দেখানো হবে।
2. ডাটাবেস সেটআপ
প্রথমে, MySQL ডাটাবেসে একটি tasks নামক টেবিল তৈরি করা হবে যেখানে টাস্কের তথ্য রাখা হবে।
CREATE DATABASE dynamic_app;
USE dynamic_app;
CREATE TABLE tasks (
id INT AUTO_INCREMENT PRIMARY KEY,
task_name VARCHAR(255) NOT NULL,
status VARCHAR(50) NOT NULL
);
এই টেবিলটি দুটি ফিল্ড ধারণ করবে:
task_name: টাস্কের নামstatus: টাস্কের অবস্থা (যেমন "Incomplete" বা "Completed")
3. PHP স্ক্রিপ্ট - টাস্ক যোগ করা এবং প্রদর্শন করা
3.1 Database Connection (db.php)
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "dynamic_app";
// ডাটাবেস সংযোগ তৈরি
$conn = new mysqli($servername, $username, $password, $dbname);
// সংযোগ চেক করা
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
3.2 PHP স্ক্রিপ্ট - টাস্ক যোগ করা (add_task.php)
<?php
include 'db.php';
if (isset($_POST['task_name'])) {
$task_name = $_POST['task_name'];
// টাস্ক ইনসার্ট করা
$sql = "INSERT INTO tasks (task_name, status) VALUES ('$task_name', 'Incomplete')";
if ($conn->query($sql) === TRUE) {
echo "New task added successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>
এটি task_name প্যারামিটার গ্রহণ করে ডাটাবেসে একটি নতুন টাস্ক ইনসার্ট করবে।
3.3 PHP স্ক্রিপ্ট - টাস্ক দেখানো (get_tasks.php)
<?php
include 'db.php';
// টাস্কগুলো ডাটাবেস থেকে রিট্রিভ করা
$sql = "SELECT * FROM tasks";
$result = $conn->query($sql);
$tasks = [];
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$tasks[] = $row;
}
}
echo json_encode($tasks);
$conn->close();
?>
এটি ডাটাবেস থেকে সকল টাস্ককে JSON আকারে রিটার্ন করবে, যাতে AJAX ক্লায়েন্ট সাইডে এগুলি সহজে প্রক্রিয়া করতে পারে।
4. AJAX এবং JavaScript
4.1 HTML ফর্ম এবং AJAX স্ক্রিপ্ট (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Task List</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Task List</h1>
<!-- Task Add Form -->
<input type="text" id="task_name" placeholder="Enter a new task">
<button onclick="addTask()">Add Task</button>
<ul id="task_list"></ul>
<script>
// টাস্ক লোড করার ফাংশন
function loadTasks() {
$.ajax({
url: "get_tasks.php",
type: "GET",
success: function(response) {
let tasks = JSON.parse(response);
$('#task_list').empty();
tasks.forEach(function(task) {
$('#task_list').append('<li>' + task.task_name + '</li>');
});
}
});
}
// নতুন টাস্ক অ্যাড করার ফাংশন
function addTask() {
let taskName = $('#task_name').val();
$.ajax({
url: "add_task.php",
type: "POST",
data: { task_name: taskName },
success: function(response) {
// টাস্ক অ্যাড করার পর লিস্ট রিফ্রেশ করা
loadTasks();
$('#task_name').val(''); // ইনপুট ফিল্ড ক্লিয়ার করা
}
});
}
// পেজ লোড হলে টাস্ক লোড করা
$(document).ready(function() {
loadTasks();
});
</script>
</body>
</html>
4.2 কোডের ব্যাখ্যা:
- AJAX Call (GET):
loadTasks()ফাংশনটিget_tasks.phpফাইলকে কল করে ডাটাবেস থেকে সমস্ত টাস্ক নিয়ে আসে এবং HTML লিস্টে দেখায়। - AJAX Call (POST):
addTask()ফাংশনটিadd_task.phpফাইলকে কল করে নতুন টাস্ক ডাটাবেসে ইনসার্ট করে এবং সফলভাবে টাস্ক যোগ করার পর টাস্ক লিস্ট রিফ্রেশ করে। - JSON Format:
get_tasks.phpথেকে পাওয়া ডাটা JSON ফরম্যাটে থাকে, এবং এটিJSON.parse()দিয়ে জাভাস্ক্রিপ্ট অ্যারে হিসেবে রূপান্তরিত হয়। - jQuery: এখানে AJAX কলে jQuery ব্যবহার করা হয়েছে, যা কোডটি সহজ এবং পরিষ্কার রাখে।
5. AJAX, PHP, এবং MySQL এর মধ্যে ইন্টারঅ্যাকশন
AJAX এবং PHP এর মাধ্যমে আমরা একটি সিম্পল ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করেছি যেখানে ব্যবহারকারীরা টাস্ক অ্যাড করতে পারবে এবং সেগুলি পেজ রিফ্রেশ ছাড়াই রিয়েল টাইমে দেখতে পারবে। এর ফলে, অ্যাপ্লিকেশনটি আরও ইন্টারঅ্যাকটিভ এবং দ্রুত হবে।
সারাংশ
AJAX এবং PHP একত্রে ব্যবহারের মাধ্যমে আপনি ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন, যেখানে পেজ রিফ্রেশ ছাড়াই ডাটা লোড, আপডেট এবং সেভ করা সম্ভব। PHP ডাটাবেসের সাথে ইন্টারঅ্যাকশন করে ডাটা রিটার্ন বা ইনসার্ট করতে সাহায্য করে, আর AJAX ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করতে পারে।
Read more
